<!--题库管理-->
<template>
  <div>
    <a-card class="contentFullHeight" :bodyStyle="{padding : '10px 10px'}">
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">
          <a-form-item label="题库名称">
            <a-input allowClear style="width: 150px" v-model="searchParams.examName"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="search">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="plus" @click="add">新增</a-button>
          </a-form-item>
          <!--导入-->
          <a-form-item>
            <UploadCom :type="3" @handleSearch="search"></UploadCom>
          </a-form-item>
        </a-form>
      </a-card>
      <!--列表-->
      <a-table
        bordered
        rowKey="key"
        size="small"
        :loading="loading"
        :columns="columns"
        :dataSource="tableData"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="examRemark" slot-scope="text">
          <div v-if="text">
            <ellipsis :length="30" tooltip>{{ text }}</ellipsis>
          </div>
        </template>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="edit(record)" href="javascript: void(0);">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm
              placement="left"
              title="确认删除?"
              @confirm="del(record)"
              okText="确认"
              cancelText="取消"
            >
              <a href="javascript: void(0);">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <RepoPopup ref="bankPopup" @ok="getTableData" />
    </a-card>
  </div>
</template>

<script>
import RepoPopup from './from'
import Ellipsis from '@/components/Ellipsis'
import itemBankService from '@/service/exam/itemBankManage'
import UploadCom from '@/components/uploadCom';
const columns = [
  {
    title: '序号',
    dataIndex: 'key'
  },
  {
    title: '题库名称',
    dataIndex: 'examName'
  },
  {
    title: '单选题数量',
    dataIndex: 'singleChoiceCount'
  },
  {
    title: '多选题数量',
    dataIndex: 'multiChoiceCount'
  },
  {
    title: '判断题数量',
    dataIndex: 'judgeCount'
  },
  {
    title: '简答题数量',
    dataIndex: 'shortAnswerCount'
  },
//  {
//    title: '创建时间',
//    dataIndex: 'createTime'
//  },
  {
    title: '备注',
    dataIndex: 'examRemark',
    scopedSlots: { customRender: 'examRemark' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
    Ellipsis,
    RepoPopup,
    UploadCom
  },
  data () {
    return {
      searchParams: {
        examName: ''
      },
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20'],
        showTotal: total => { return `共 ${total} 条` },
        current: 1,
        pageSize: 10,
        total: 0
      },
      columns,
      loading: false,
      tableData: []
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    handleTableChange (pagination, filters, { field, order }) {
      this.pagination = pagination
      if (field && order) {
        this.searchParams.sortField = field
        this.searchParams.sortOrder = order === 'ascend' ? 'asc' : 'desc'
      }
      this.getTableData()
    },
    getTableData () {
      this.loading = true
      const { pageSize, current } = this.pagination
      const { sortField, sortOrder, examName } = this.searchParams
      const parameter = {
        examName,
        sortField,
        sortOrder,
        pageSize: pageSize || 10,
        pageNumber: current || 1
      }
      itemBankService.page(parameter).then(({ total, records }) => {
        this.loading = false
        this.pagination.total = total
        this.tableData = records
      }).catch(() => {
        this.loading = false
      })
    },
    search () {
      this.pagination.current = 1
      this.getTableData()
    },
    add () {
      this.$refs.bankPopup.showAdd()
    },
    edit (record) {
      this.$refs.bankPopup.showEdit(record)
    },
    del ({ examId }) {
      if (!examId) {
        this.$message.info('id不能为空')
        return
      }
      itemBankService.del({ id: examId }).then(({ code, msg }) => {
        if (code === 200) {
          this.$message.success('删除成功')
          this.getTableData()
        } else {
          this.$message.error(msg || '删除失败')
        }
      })
    }
  }
}
</script>
